<template>
	<view class="gift-card-query-container">
		<view class="header">
			<text class="title">
				批量查询礼品卡余额
			</text>
		</view>
		<view class="token-section">
			<text class="section-title">
				授权Token
			</text>
			<view class="token-input-wrapper">
				<input class="token-input" type="text" v-model="authToken" placeholder="请输入授权Token"
				maxlength="100" />
			</view>
		</view>
		<view class="card-type-section">
			<text class="section-title">
				选择礼品卡类型
			</text>
			<view class="custom-dropdown">
				<view class="selected-option" @click="toggleDropdown">
					<text>
						{{ selectedCardTypeText }}
					</text>
					<uni-icons :type="isDropdownOpen ? 'top' : 'bottom'" size="14" color="#666666">
					</uni-icons>
				</view>
				<view class="options-list" v-if="isDropdownOpen">
					<view v-for="type in cardTypes" :key="type.value" class="option-item"
					:class="{ 'active': selectedCardType === type.value }" @click="selectCardType(type)">
						<text>
							{{ type.text }}
						</text>
					</view>
				</view>
			</view>
		</view>
		<view class="input-section">
			<view class="input-header">
				<text class="section-title">
					批量输入礼品卡号
				</text>
				<text class="input-tip">
					请输入礼品卡号，每行一个（最多50个）
				</text>
			</view>
			<textarea class="card-input" v-model="cardNumbers" placeholder="例如：
1234-5678-9012-3456
2345-6789-0123-4567
..." :maxlength="2000">
			</textarea>
			<view class="input-counter">
				<text>
					已输入 {{ cardCount }} 个卡号
				</text>
			</view>
		</view>
		<view class="action-buttons">
			<button class="query-button cursor-pointer" @click="handleQuery" :disabled="isLoading">
				<uni-icons v-if="isLoading" type="spinner-cycle" size="18" color="#ffffff">
				</uni-icons>
				<text>
					{{ isLoading ? '查询中...' : '开始查询' }}
				</text>
			</button>
			<button class="clear-button cursor-pointer" @click="handleClear">
				清空输入
			</button>
		</view>
		<view class="result-section" v-if="queryResults.length > 0">
			<view class="result-header">
				<text class="section-title">
					查询结果
				</text>
				<button class="export-button cursor-pointer" @click="handleExport">
					<uni-icons type="download" size="16" color="#333333">
					</uni-icons>
					<text>
						导出结果
					</text>
				</button>
			</view>
			<view class="result-table">
				<view class="table-header">
					<view class="th">
						卡号
					</view>
					<view class="th">
						余额
					</view>
					<view class="th">
						状态
					</view>
					<view class="th">
						有效期
					</view>
				</view>
				<scroll-view class="table-body" scroll-y>
					<view v-for="(result, index) in queryResults" :key="index" class="table-row"
					:class="{ 'even-row': index % 2 === 1 }">
						<view class="td card-number">
							{{ result.cardNumber }}
						</view>
						<view class="td balance">
							{{ result.balance }}
						</view>
						<view class="td status" :class="getStatusClass(result.status)">
							{{ result.status }}
						</view>
						<view class="td expiry">
							{{ result.expiry }}
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<view class="notice-section">
			<view class="notice-title">
				<uni-icons type="info" size="18" color="#3a86ff">
				</uni-icons>
				<text>
					使用说明
				</text>
			</view>
			<view class="notice-content">
				<text>
					1. 选择对应的礼品卡类型，确保与您的卡片匹配
				</text>
				<text>
					2. 每行输入一个礼品卡号，支持批量粘贴
				</text>
				<text>
					3. 查询结果可导出为Excel文件保存
				</text>
				<text>
					4. 如遇查询问题，请联系客服：400-123-4567
				</text>
			</view>
		</view>
	</view>
</template>
<script lang="ts" setup>
	import {
		ref,
		computed
	}
	from 'vue';

	const authToken = ref('');
	// 礼品卡类型
	const cardTypes = [{
		text: 'Nike礼品卡',
		value: 'nike'
	},
	{
		text: 'Adidas礼品卡',
		value: 'adidas'
	},
	{
		text: '梅西礼品卡',
		value: 'messi'
	}];
	// 状态
	const selectedCardType = ref('nike');
	const isDropdownOpen = ref(false);
	const cardNumbers = ref('');
	const isLoading = ref(false);
	// 计算选中的卡类型文本
	const selectedCardTypeText = computed(() => {
		const selected = cardTypes.find(type => type.value === selectedCardType.value);
		return selected ? selected.text: '请选择礼品卡类型';
	});
	// 切换下拉列表显示状态
	const toggleDropdown = () => {
		isDropdownOpen.value = !isDropdownOpen.value;
	};
	// 选择卡类型
	const selectCardType = (type: {
		value: string;
		text: string
	}) => {
		selectedCardType.value = type.value;
		isDropdownOpen.value = false;
	};
	const queryResults = ref < Array < {
		cardNumber: string;
		balance: string;
		status: string;
		expiry: string;
	} >> ([]);
	// 计算已输入的卡号数量
	const cardCount = computed(() => {
		if (!cardNumbers.value.trim()) return 0;
		return cardNumbers.value.split('\n').filter(line => line.trim()).length;
	});
	// 选择卡类型
	const handleCardTypeSelect = (value: string) => {
		selectedCardType.value = value;
	};
	// 清空输入
	const handleClear = () => {
		authToken.value = '';
		cardNumbers.value = '';
		queryResults.value = [];
	};
	// 开始查询
	const handleQuery = () => {
		if (!authToken.value.trim()) {
			uni.showToast({
				title: '请输入授权Token',
				icon: 'none'
			});
			return;
		}

		if (!cardNumbers.value.trim()) {
			uni.showToast({
				title: '请输入礼品卡号',
				icon: 'none'
			});
			return;
		}
		if (cardCount.value > 50) {
			uni.showToast({
				title: '最多支持50个卡号同时查询',
				icon: 'none'
			});
			return;
		}
		isLoading.value = true;
		// 模拟查询过程
		setTimeout(() => {
			const cards = cardNumbers.value.split('\n').filter(line => line.trim());
			const results = cards.map(card => {
				// 随机生成查询结果
				const balance = Math.floor(Math.random() * 1000) + 100;
				const statusOptions = ['正常', '已过期', '已冻结', '未激活'];
				const status = statusOptions[Math.floor(Math.random() * statusOptions.length)];
				// 生成随机有效期
				const today = new Date();
				const futureDate = new Date(today);
				futureDate.setDate(today.getDate() + Math.floor(Math.random() * 365));
				const expiry = `$ {
					futureDate.getFullYear()
				} - $ {
					String(futureDate.getMonth() + 1).padStart(2, '0')
				} - $ {
					String(futureDate.getDate()).padStart(2, '0')
				}`;
				return {
					cardNumber: card,
					balance: `¥$ {
						balance.toFixed(2)
					}`,
					status,
					expiry
				};
			});
			queryResults.value = results;
			isLoading.value = false;
			uni.showToast({
				title: '查询完成',
				icon: 'success'
			});
		},
		2000);
	};
	// 导出结果
	const handleExport = () => {
		uni.showToast({
			title: '导出功能在真实环境中实现',
			icon: 'none'
		});
	};
	// 获取状态样式类
	const getStatusClass = (status: string) => {
		switch (status) {
		case '正常':
			return 'status-normal';
		case '已过期':
			return 'status-expired';
		case '已冻结':
			return 'status-frozen';
		case '未激活':
			return 'status-inactive';
		default:
			return '';
		}
	};
</script>
<style>
page {
height: 100%;
background-color: #f5f7fa;
}
.cursor-pointer {
cursor: pointer;
}
.gift-card-query-container {
padding: 30rpx;
box-sizing: border-box;
min-height: 100%;
}
.header {
margin-bottom: 40rpx;
text-align: center;
}
.title {
font-size: 36px;
font-weight: bold;
color: #333333;
}
.section-title {
font-size: 18px;
font-weight: 600;
color: #333333;
margin-bottom: 20rpx;
display: block;
}
/* 卡类型选择区域 */
.token-section {
margin-bottom: 40rpx;
background-color: #ffffff;
border-radius: 16rpx;
padding: 30rpx;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.token-input-wrapper {
width: 100%;
}

.token-input {
width: 100%;
height: 80rpx;
padding: 0 30rpx;
background-color: #ffffff;
border: 1px solid #e0e0e0;
border-radius: 8rpx;
font-size: 28rpx;
color: #333333;
box-sizing: border-box;
}

.card-type-section {
margin-bottom: 40rpx;
background-color: #ffffff;
border-radius: 16rpx;
padding: 30rpx;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.custom-dropdown {
position: relative;
width: 100%;
}
.selected-option {
display: flex;
align-items: center;
justify-content: space-between;
height: 80rpx;
padding: 0 30rpx;
background-color: #ffffff;
border: 1px solid #e0e0e0;
border-radius: 8rpx;
cursor: pointer;
}
.selected-option text {
font-size: 28rpx;
color: #333333;
}
.options-list {
position: absolute;
top: 100%;
left: 0;
right: 0;
margin-top: 8rpx;
background-color: #ffffff;
border: 1px solid #e0e0e0;
border-radius: 8rpx;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
z-index: 100;
}
.option-item {
padding: 20rpx 30rpx;
font-size: 28rpx;
color: #333333;
cursor: pointer;
transition: all 0.2s;
}
.option-item:hover,
.option-item.active {
background-color: #f5f7fa;
}
.option-item:not(:last-child) {
border-bottom: 1px solid #f0f0f0;
}
/* 输入区域 */
.input-section {
margin-bottom: 40rpx;
background-color: #ffffff;
border-radius: 16rpx;
padding: 30rpx;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.input-header {
margin-bottom: 20rpx;
}
.input-tip {
font-size: 14px;
color: #666666;
display: block;
margin-top: 8rpx;
}
.card-input {
width: 100%;
height: 300rpx;
border: 1px solid #e0e0e0;
border-radius: 8rpx;
padding: 20rpx;
font-size: 14px;
color: #333333;
background-color: #f9f9f9;
box-sizing: border-box;
}
.input-counter {
margin-top: 16rpx;
text-align: right;
font-size: 14px;
color: #666666;
}
/* 按钮区域 */
.action-buttons {
display: flex;
justify-content: center;
margin-bottom: 40rpx;
gap: 30rpx;
}
.query-button {
width: 300rpx;
height: 90rpx;
background-color: #3a86ff;
color: #ffffff;
border-radius: 45rpx;
font-size: 16px;
font-weight: 600;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0 4px 12px rgba(58, 134, 255, 0.2);
transition: all 0.3s;
}
.query-button:active {
transform: translateY(2rpx);
box-shadow: 0 2px 6px rgba(58, 134, 255, 0.2);
}
.clear-button {
width: 200rpx;
height: 90rpx;
background-color: #f5f5f5;
color: #666666;
border-radius: 45rpx;
font-size: 16px;
display: flex;
justify-content: center;
align-items: center;
transition: all 0.3s;
}
.clear-button:active {
background-color: #e0e0e0;
}
/* 结果区域 */
.result-section {
margin-bottom: 40rpx;
background-color: #ffffff;
border-radius: 16rpx;
padding: 30rpx;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.result-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20rpx;
}
.export-button {
display: flex;
align-items: center;
background-color: #f5f5f5;
border: none;
padding: 10rpx 20rpx;
border-radius: 30rpx;
font-size: 14px;
color: #333333;
}
.export-button text {
margin-left: 8rpx;
}
.result-table {
border: 1px solid #e0e0e0;
border-radius: 8rpx;
overflow: hidden;
}
.table-header {
display: flex;
background-color: #f5f7fa;
border-bottom: 1px solid #e0e0e0;
}
.th {
flex: 1;
padding: 20rpx;
font-size: 14px;
font-weight: 600;
color: #333333;
text-align: center;
}
.table-body {
max-height: 600rpx;
overflow: auto;
}
.table-row {
display: flex;
border-bottom: 1px solid #f0f0f0;
}
.table-row:last-child {
border-bottom: none;
}
.even-row {
background-color: #f9f9f9;
}
.td {
flex: 1;
padding: 20rpx;
font-size: 14px;
color: #333333;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}
.card-number {
color: #3a86ff;
font-family: monospace;
}
.balance {
font-weight: 600;
color: #333333;
}
.status {
padding: 6rpx 16rpx;
border-radius: 30rpx;
font-size: 12px;
}
.status-normal {
background-color: #e6f7ee;
color: #00a854;
}
.status-expired {
background-color: #fff1f0;
color: #f5222d;
}
.status-frozen {
background-color: #e6f7ff;
color: #1890ff;
}
.status-inactive {
background-color: #f5f5f5;
color: #999999;
}
/* 提示信息区域 */
.notice-section {
background-color: #f9f9f9;
border-radius: 16rpx;
padding: 30rpx;
margin-bottom: 40rpx;
border-left: 4px solid #3a86ff;
}
.notice-title {
display: flex;
align-items: center;
margin-bottom: 16rpx;
}
.notice-title text {
margin-left: 10rpx;
font-size: 16px;
font-weight: 600;
color: #333333;
}
.notice-content {
display: flex;
flex-direction: column;
}
.notice-content text {
font-size: 14px;
color: #666666;
line-height: 1.6;
margin-bottom: 8rpx;
}
.notice-content text:last-child {
margin-bottom: 0;
}
</style>